.control_button
{
    position:           relative;
    width:              5em;
    height:             5em;
/*     bottom:             1%; */
/*     right:              0; */
    border-radius:      50%;
    border-style:       solid;
    border-width:       0px;
    border-color:       black;
    box-shadow:         0 0 2em 0pt rgba(74, 32, 157, .4);

    /* Works on Firefox and Chromium */
    background-image:
       /* Purple unpressed */
       radial-gradient(circle closest-side at 50% 50%,
                       #644A9B  15%, /* purple */
                       #220F48  85%, /* dark purple*/
                        black    87%,
                       DimGray  90%,
                       black    98%);
       
        /* Another color option is Blue:*/
        /*radial-gradient(circle closest-side at 50% 50%,
                       #0000C0 65%,
                       darkblue 85%,
                       black   87%,
                       DimGray   90%,
                       black 98%);*/
}

.control_button_clicked 
{
    /* ControlButton animation settings */    
    animation-name: control_button_animate;
    animation-duration: 1300ms;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-play-state: running;
    animation-fill-mode: forwards;
    /* Safari and Chrome: */
    -webkit-animation-name: control_button_animate;
    -webkit-animation-duration: 1300ms;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    /* Firefox*/
    -moz-animation-name: control_button_animate;
    -moz-animation-duration: 1300ms;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    /* Something else */
    -o-animation-name: control_button_animate;
    -o-animation-duration: 1300ms;
    -o-animation-timing-function: linear;
    -o-animation-delay: 0s;
    -o-animation-iteration-count: 1;
    -o-animation-direction: alternate;
    -o-animation-play-state: running;
    -o-animation-fill-mode: forwards; 
}


.control_button:hover
{
    box-shadow: 0 0 2em 0px #4A209D;
}


/* CSS3 (standard. I wonder if this can conflict with the others? I'll leave it commented until needed) */
/*@keyframes control_button_animate
{
    0%
    {
        transform: scale(.1);
        transform: scale(.1);
        position:relative;
        bottom:-15px;
        right:-15px;
    }
    
    1%
    {
        transform: scale(1);
        transform: scale(1);
        bottom:0px;
        right:0px;
    }
    
    30%
    {
        transform: scaleY(1.1) scaleX(.9);
        transform: scaleY(1.1) scaleX(.9);
        bottom:5px;
        right:5px;
        
    }
    
    65%
    {
        transform: scaleY(.6) scaleX(.8);
        transform: scaleY(.6) scaleX(.8);
    }
    
    99%, 100%
    {
        transform: scale(.5);
        transform: scale(.5);
        bottom:-15px;
        right:-15px;
    }
}*/


/* Firefox */
@-moz-keyframes control_button_animate
{
    0%
    {
        -moz-transform: scale(.1);
        transform: scale(.1);
        position:relative;
        bottom:-15px;
        right:-15px;
    }
    
    1%
    {
        -moz-transform: scale(1);
        transform: scale(1);
        bottom:0px;
        right:0px;
    }
    
    30%
    {
        -moz-transform: scaleY(1.1) scaleX(.9);
        transform: scaleY(1.1) scaleX(.9);
        bottom:5px;
        right:5px;
        
    }
    
    65%
    {
        -moz-transform: scaleY(.6) scaleX(.8);
        transform: scaleY(.6) scaleX(.8);
    }
    
    99%, 100%
    {
        -moz-transform: scale(.5);
        transform: scale(.5);
        bottom:-15px;
        right:-15px;
    }
}

/* Safari and Chrome: */
@-webkit-keyframes control_button_animate 
{
    0%
    {
        -webkit-transform: scale(.1);
        transform: scale(.1);
        position:relative;
        bottom:-15px;
        right:-15px;
        

    }
    
    1%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
        bottom:0px;
        right:0px;

    }
    
    30%
    {
        -webkit-transform: scaleY(1.1) scaleX(.9);
        transform: scaleY(1.1) scaleX(.9);
        bottom:5px;
        right:5px;
    }
    
    65%
    {
        -webkit-transform: scaleY(.6) scaleX(.8);
        transform: scaleY(.6) scaleX(.8);
        
        background-image:
        /* Purple unpressed */
        radial-gradient(circle closest-side at 50% 50%,
                       #644A9B  15%, /* purple */
                       #220F48  85%, /* dark purple*/
                        black   87%,
                        gray    90%,
                        black  98%);
    }
    
    99%, 100%
    {
        -webkit-transform: scale(.5);
        transform: scale(.5);
        bottom:-15px;
        right:-15px;
/*        -moz-opacity:.8;
        -khtml-opacity: .8;
        opacity: .8;
        -webkit-opacity: .8;*/
    background-image:
       /* Purple unpressed */
       radial-gradient(circle closest-side at 50% 50%,
                       #644A9B  15%, /* purple */
                       #220F48  85%, /* dark purple*/
                       black    92%,
                       yellow   96%,
                       white    98%);
       
       box-shadow: 0 0 1em 0pt white;
    }
}

@-o-keyframes control_button_animate 
{    
    0%
    {
        -o-transform: scale(.1);
        transform: scale(.1);
        position:relative;
        bottom:-15px;
        right:-15px;
    }
    
    1%
    {
        -o-transform: scale(1);
        transform: scale(1);
        bottom:0px;
        right:0px;
    }
    
    30%
    {
        -o-transform: scaleY(1.1) scaleX(.9);
        transform: scaleY(1.1) scaleX(.9);
        bottom:5px;
        right:5px;
        
    }
    
    65%
    {
        -o-transform: scaleY(.6) scaleX(.8);
        transform: scaleY(.6) scaleX(.8);
    }
    
    
    99%, 100%
    {
        -o-transform: scale(.5);
        transform: scale(.5);
        bottom:-15px;
        right:-15px;
    }    
}



@-ms-keyframes control_button_animate
{
    0%
    {
        -ms-transform: scale(.1);
        transform: scale(.1);
        position:relative;
        bottom:-15px;
        right:-15px;
    }
    
    1%
    {
        -ms-transform: scale(1);
        transform: scale(1);
        bottom:0px;
        right:0px;
    }
    
    30%
    {
        -ms-transform: scaleY(1.1) scaleX(.9);
        transform: scaleY(1.1) scaleX(.9);
        bottom:5px;
        right:5px;
        
    }
    
    65%
    {
        -ms-transform: scaleY(.6) scaleX(.8);
        transform: scaleY(.6) scaleX(.8);
    }
    
    
    99%, 100%
    {
        -ms-transform: scale(.5);
        transform: scale(.5);
        bottom:-15px;
        right:-15px;
    }    
    
}

@-ms-keyframes control_button_animate
{
    0%
    {
        -ms-transform: scale(.1);
        transform: scale(.1);
        position:relative;
        bottom:-15px;
        right:-15px;
    }
    
    1%
    {
        -ms-transform: scale(1);
        transform: scale(1);
        bottom:0px;
        right:0px;
    }
    
    30%
    {
        -ms-transform: scaleY(1.1) scaleX(.9);
        transform: scaleY(1.1) scaleX(.9);
        bottom:5px;
        right:5px;
        
    }
    
    65%
    {
        -ms-transform: scaleY(.6) scaleX(.8);
        transform: scaleY(.6) scaleX(.8);
    }
    
    
    99%, 100%
    {
        -ms-transform: scale(.5);
        transform: scale(.5);
        bottom:-15px;
        right:-15px;
    }   
    
}



/* BEGIN pulsating border. Not a good idea for this particular use but leaving the code here for example. */
/*@keyframes pulse
{
50% { border-color: rgba(255, 255, 255, 1); box-shadow: 0 0 15px 0px white;}
}*/

/*.control_button:hover
{
    animation-name: pulse;
    animation-duration: 2500ms;
    animation-delay: 0ms;
    animation-fill-mode: none;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}*/
